<template>
  <div>
    <!-- <h4 class="title">home首页</h4> -->
    <!-- <hr /> -->
    <!-- 跳转到搜索页面 -->
    <!-- 路由导航 -->
    <!-- 封装一个全局搜索 -->

    <!-- 子导航 -->

    <!--  <van-tabs id="nav_pos" v-model="cateId" @click="change">
      <van-tab
        class="item"
        :name="item.id"
        v-for="item in cates"
        :key="item.id"
        :title="item.catename"
      ></van-tab>
    </van-tabs>
     <div class="pos">
      <img :src="require('../../assets/img/cate_noselect.png')" alt />
      <span>分类</span>
    </div>
    -->

    <!--
      之前的版本
         <div class="item" v-for="item in cates" :key="item.id">
      <router-link to="/list">{{item.name}}</router-link>
      <router-link :to="'/list?id='+item.id + '&name='+item.catename">{{item.catename}}</router-link>
    </div>-->

    <!-- <button @click="pushSearch()">push跳转搜索</button>
    <button @click="replaceSearch()">replace跳转搜索</button>-->
    <!-- 1.封装一个全局返会 -->
    <!-- <hr /> -->
    <!-- =========================内容区域====================================== -->
    <!-- 调用头部子组件 -->
    <v-header></v-header>
    <!-- 调用子导航分类的子组件 -->
    <v-cate :cates="cates"></v-cate>
    <!--调用轮播子组件 -->
    <v-banner :banner="banner"></v-banner>

    <!-- 调用vXianshi 子组件 -->
    <v-xianshi></v-xianshi>
    <!-- 调用双十一子组件 -->
    <v-show></v-show>
    <!-- 调用小组件 -->
    <v-goods :goods="goods"></v-goods>

    <!-- =================================================================== -->
    <!-- 封装全局的过滤器 -->
    <!-- 之后查看 -->
    <!-- <div>{{20|filterPrice}}</div>
    <div>{{'12345678912'|filterTel}}</div>
    <div>{{1634914334825|filterTime}}</div>-->
    <!-- <hr /> -->
    <!-- 路由传参 -->
    <!-- 2.遍历数据：并且跳转到list，但是需要告诉list，哪条数据过来的  -->

    <!-- vue中有2种方式，一种是search传参（？），一种是动态路由传参（：） -->

    <!--动态路由传参： 修改路由规则 -->
  </div>
</template>

<script>
// 引入头部
import vHeader from "./components/vHeader.vue";
// 引入分类组件
import vCate from "./components/vCate.vue";
// 引入轮播子组件
import vBanner from "./components/vBanner.vue";
// 引入vGoods
import vGoods from "./components/vGoods.vue";
// 引入双十一商品展示
import vShow from "./components/vShow.vue";
// 引入限时秒杀子组件
import vXianshi from "./components/vXianshi.vue";
import { reqHomeCates, reqBanner, reqHomeList } from "../../http/http";
export default {
  // 注册组件
  components: {
    vCate,
    vGoods,
    vXianshi,
    vBanner,
    vHeader,
    vShow
  },
  methods: {
    pushSearch() {
      this.$router.push("/search");
    },
    replaceSearch() {
      this.$router.replace("/search");
    }
  },
  data() {
    return {
      // n: 0,
      // cateId: "",
      // title: "",
      // value: "",
      // 1.初始化一个空数组
      cates: [],
      goods: [],
      banner: []
    };
  },
  mounted() {
    // 发请求
    reqHomeCates().then(res => {
      console.log(res);
      this.cates = res.data.list;
    });
    // 请求轮播数据
    reqBanner().then(res => {
      this.banner = res.data.list;
    });

    // 请求商品数据
    reqHomeList().then(res => {
      this.goods = res.data.list;
    });
  },
  methods: {}
};
</script>

<style scoped>
.main{
  margin-top: 1.6rem;
}
</style>